Angular Material এর MatList কম্পোনেন্ট সাধারণত একটি স্টাইলিশ এবং কাস্টমাইজযোগ্য লিস্ট তৈরি করতে ব্যবহৃত হয়। কিন্তু যখন লিস্টে অনেক ডেটা থাকে, তখন পুরো লিস্টটি লোড করা এবং ডিসপ্লে করা পারফরম্যান্স সমস্যার সৃষ্টি করতে পারে, বিশেষত মোবাইল ডিভাইসে। এর সমাধান হিসেবে, Virtual Scrolling বা ভার্চুয়াল স্ক্রল ব্যবহার করা হয়, যা শুধুমাত্র দৃশ্যমান এলিমেন্টগুলো লোড করে, এর ফলে পারফরম্যান্স উন্নত হয়।

Angular Material এর MatList এর সাথে ভার্চুয়াল স্ক্রল ব্যবহার করার জন্য CdkVirtualScrollViewport এবং CdkScrollingModule ব্যবহার করা হয়।

ভার্চুয়াল স্ক্রল (Virtual Scrolling) প্রয়োগ করা

১. প্রয়োজনীয় মডিউল ইমপোর্ট করা

ভার্চুয়াল স্ক্রল ব্যবহার করার জন্য প্রথমে CdkScrollingModule এবং MatListModule ইমপোর্ট করতে হবে।

import { CdkScrollingModule } from '@angular/cdk/scrolling';
import { MatListModule } from '@angular/material/list';

@NgModule({
  imports: [
    CdkScrollingModule,
    MatListModule
  ]
})
export class AppModule { }

২. HTML টেমপ্লেটে ভার্চুয়াল স্ক্রল প্রয়োগ করা

এখন, CdkVirtualScrollViewport ব্যবহার করে ভার্চুয়াল স্ক্রল যোগ করা যাবে। এটি ব্যবহারকারী স্ক্রলিং করলে শুধুমাত্র দৃশ্যমান আইটেমগুলোই লোড করবে এবং অন্যান্য আইটেমগুলো লোড হবে না যতক্ষণ না সেগুলো দৃশ্যমান হয়।

<cdk-virtual-scroll-viewport itemSize="50" class="list-container">
  <mat-list>
    <mat-list-item *cdkVirtualFor="let item of items">
      {{item}}
    </mat-list-item>
  </mat-list>
</cdk-virtual-scroll-viewport>

এখানে:

• cdk-virtual-scroll-viewport: এটি ভার্চুয়াল স্ক্রল কন্টেইনার, যা শুধুমাত্র দৃশ্যমান এলিমেন্টগুলো প্রদর্শন করে।
• itemSize: এটি প্রতিটি আইটেমের উচ্চতা নির্ধারণ করে।
• cdkVirtualFor: এটি ngFor এর মত কাজ করে, তবে এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে, বাকি আইটেমগুলো লোড হয় না যতক্ষণ না এগুলো স্ক্রলে দেখা যায়।

৩. টাইপস্ক্রিপ্ট ফাইলে ডেটা প্রদান

import { Component } from '@angular/core';

@Component({
  selector: 'app-virtual-list',
  templateUrl: './virtual-list.component.html',
  styleUrls: ['./virtual-list.component.css']
})
export class VirtualListComponent {
  items = Array.from({ length: 1000 }, (_, i) => `Item #${i + 1}`);
}

এখানে, items একটি ১০০০ আইটেমের লিস্ট তৈরি করছে, যা ভার্চুয়াল স্ক্রলিংয়ের মাধ্যমে লোড হবে।

ভার্চুয়াল স্ক্রলিংয়ের সুবিধা

1. পারফরম্যান্স উন্নতি: ভার্চুয়াল স্ক্রলিং শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে, যার ফলে কম মেমরি ব্যবহৃত হয় এবং অ্যাপ্লিকেশন আরও দ্রুত কাজ করে।
2. লম্বা লিস্টের জন্য উপযুক্ত: অনেক ডেটা থাকলে, যেমন ১০০০ বা তার বেশি আইটেম, ভার্চুয়াল স্ক্রল ব্যবহার করলে অ্যাপ্লিকেশন অনেক দ্রুত লোড হয়।
3. মোবাইল ফ্রেন্ডলি: ভার্চুয়াল স্ক্রল মোবাইল ডিভাইসেও পারফরম্যান্স উন্নত করতে সাহায্য করে, যেখানে কম রিসোর্স ব্যবহৃত হয়।

স্টাইলিং এবং কাস্টমাইজেশন

লিস্টের স্টাইলিং করতে CSS ব্যবহার করতে পারেন। যেমন, ভার্চুয়াল স্ক্রল কন্টেইনারের আউটপুটের মধ্যে প্যাডিং এবং স্ক্রলবার ইত্যাদি কাস্টমাইজ করা যায়।

.list-container {
  height: 400px;
  width: 300px;
  border: 1px solid #ccc;
  overflow: auto;
}

এখানে, height এবং width দিয়ে ভার্চুয়াল স্ক্রল কন্টেইনারের আকার নির্ধারণ করা হয়েছে, এবং overflow এর মাধ্যমে স্ক্রলিং সক্ষম করা হয়েছে।

Virtual Scrolling বা ভার্চুয়াল স্ক্রল Angular Material এর MatList কম্পোনেন্টে খুবই কার্যকরী, বিশেষত যখন অনেক আইটেম নিয়ে কাজ করা হয়। এটি পারফরম্যান্স অপটিমাইজেশন করতে সাহায্য করে, কারণ এটি শুধুমাত্র দৃশ্যমান আইটেমগুলো লোড করে। CdkVirtualScrollViewport এবং CdkScrollingModule এর মাধ্যমে সহজেই ভার্চুয়াল স্ক্রল প্রয়োগ করা যায়, যা বড় বড় ডেটা সেটের সাথে কাজ করার জন্য উপযুক্ত।